<template>
  <div id="app">
    <transition mode="out-in"
      :name="transitionName"
      :enter-active-class="'slide-active'"
      :leave-active-class="'slide-active'">
        <router-view></router-view>
    </transition>
    <Footer v-if="['articlePage','logPage'].indexOf(routeName)<0"></Footer>
  </div>
</template>

<script>
import Footer from '@/components/footer.vue'
import { mapActions, mapState } from 'vuex'
export default {
  name: 'App',
  data() {
    return {
      transitionName: 'slide-left',
      routeName: '',
      userInfo: {
        userName: '',
        password: '',
        uuid: '',
        token: ''
      }
    }
  },
  components: {
    Footer
  },
  computed: {
    ...mapState(['refreshLink', 'isLogin'])
  },
  methods: {
    ...mapActions(['getRefresh', 'loginAction', 'userInfoAction']),
    check_user() {
      let app_keys_a = []
      let app_cookie_rizhi = this.$cookies.getCookie('app_rizhi_')
      app_cookie_rizhi = app_cookie_rizhi == undefined ? '' : app_cookie_rizhi
      let app_cookie_key = app_cookie_rizhi.split('&')
      app_cookie_key.forEach(value => {
        app_keys_a.push(value.split('=')[1])
      })
      // console.log(app_keys_a[0], app_keys_a[1], app_keys_a[2], app_keys_a[3]);
      let appSignMd5 = this.$md5(
        [
          this.$APPKEY.app_key,
          'App.User.Check',
          app_keys_a[1],
          app_keys_a[0],
          this.$APPKEY.app_secret
        ].join('')
      ).toUpperCase()
      // console.log(app_keys_a[0], app_keys_a[1], this.$APPKEY.app_key, appSignMd5)
      this.$axios
        .get('/api/?&service=App.User.Check', {
          params: {
            uuid: app_keys_a[0],
            token: app_keys_a[1],
            app_key: this.$APPKEY.app_key,
            sign: appSignMd5
          }
        })
        .then(data => {
          console.log(data)
          if (data.status === 200 && data.data.data.err_code === 0) {
            this.loginAction(1)
            this.userInfo.userName = app_keys_a[2]
            this.userInfo.password = app_keys_a[3]
            this.userInfo.uuid = app_keys_a[0]
            this.userInfo.token = app_keys_a[1]
            window.sessionStorage.setItem('userInfoMsg', JSON.stringify(this.userInfo))
            // this.$router.push({ path: "/" });
            // console.log(this.$store.state);
          } else {
            return
          }
        })
        .catch(error => {
          self.fetchError = error
        })
    }
  },
  watch: {
    $route(to) {
      this.routeName = to.name
    }
  },
  created() {
    document.body.removeChild(document.getElementById('loading'))
    if (window.sessionStorage.getItem('userInfoMsg')) {
      this.loginAction(1)
      let sessionUserInfo = window.sessionStorage.getItem('userInfoMsg')
      this.userInfoAction(JSON.parse(sessionUserInfo))
    } else {
      this.check_user()
    }
    this.$navigation.on('forward', to => {
      this.transitionName = 'slide-left'
      this.getRefresh(to.route.name)
    })
    this.$navigation.on('back', to => {
      this.transitionName = 'slide-right'
      this.getRefresh(to.route.name)
    })
    this.$navigation.on('refresh', to => {
      this.getRefresh(to.route.name)
      // this.$bus.$emit('refreshLink', '4546ihvgbuv')
    })
  },
  mounted() {
    console.log(this.$cookies.getCookie('app_rizhi_'))
  }
}
</script>

<style lang="scss">
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  color: #2c3e50;
}
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(30%, 0, 0);
}
.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-30%, 0, 0);
}
</style>
